<template>
  <div class="windy-field-container">
    <a class="tools" @click="togglePlay" :title="playing ? '暂停环绕' : '环绕飞行'">
      <PlayCircleOutlined v-if="!playing" />
      <PauseCircleOutlined v-if="playing" />
    </a>
    <div id="windy-field-container" />
  </div>
</template>

<script>
import { PlayCircleOutlined, PauseCircleOutlined, PlayCircleFilled, PauseCircleFilled } from '@ant-design/icons-vue';
import * as psLib from '@lib/ParticleSystem';
import * as volcano from './lib/volcano';
import * as $Cesium from '@cesium/Source/Cesium.js';

import * as windy from './lib/windy';

let Cesium = $Cesium;

// Cesium.Camera.DEFAULT_VIEW_FACTOR=0.25//摄像机视口远近参数，可设置地球大小

import { defineComponent, ref, onMounted, h } from 'vue';
export default defineComponent({
  name: 'windy-field',
  components: { PlayCircleOutlined, PauseCircleOutlined, PlayCircleFilled, PauseCircleFilled },
  setup() {
    return {
      viewer: null
    };
  },
  data() {
    return {
      playing: false
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // Grant CesiumJS access to your ion assets
      Cesium.Ion.defaultAccessToken = $accessToken.cs;

      let options = {
        selectionIndicator: false,
        animation: false,
        // baseLayerPicker: false,
        geocoder: false,
        timeline: false,
        navigationHelpButton: false,
        homeButton: false,
        sceneModePicker: false,
        fullscreenButton: false, //视察全屏按钮
        infoBox: false,
        shouldAnimate: true,
        terrainProvider: Cesium.createWorldTerrain()
      };

      var viewer = windy.create('windy-field-container', options);

      // var viewer = new Cesium.Viewer('windy-field-container', options);

      this.viewer = viewer;

      // // Lock camera to a point
      // // var center = Cesium.Cartesian3.fromRadians(2.4213211833389243, 0.6171926869414084, 3626.0426275055174);
      // var center = Cesium.Cartesian3.fromDegrees(138.73148465094258, 35.36253610808178, 3626.042627504157);

      // var transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);
      // viewer.scene.camera.lookAtTransform(transform, new Cesium.HeadingPitchRange(0, -Math.PI / 20, 10000));

      // var ellipsoid = viewer.scene.globe.ellipsoid;
      // var cartographic = ellipsoid.cartesianToCartographic(center);
      // var lat = Cesium.Math.toDegrees(cartographic.latitude);
      // var lng = Cesium.Math.toDegrees(cartographic.longitude);
      // var alt = cartographic.height;

      // console.log(lng, lat, alt);

      // volcano.volcano_burst(Cesium, viewer, center);

      const { playing, start } = this;

      // playing && start();
    },
    rotate(clock) {
      this.viewer.scene.camera.rotateRight(0.005);
    },
    start() {
      let { viewer, rotate } = this;
      viewer.clock.onTick.addEventListener(rotate);
    },
    stop() {
      let { viewer, rotate } = this;
      viewer.clock.onTick.removeEventListener(rotate);
    },
    togglePlay() {
      this.playing = !this.playing;
      let { playing, start, stop } = this;
      if (playing) {
        start();
      } else {
        stop();
      }
    }
  }
});
</script>

<style lang="less">
.windy-field-container {
  #windy-field-container {
    width: 100%;
    height: 100%;
    .cesium-viewer-bottom {
      display: none !important;
    }
  }

  .tools {
    position: absolute;
    top: 57px;
    left: 7px;
    font-size: 1.5em;
    padding: 4px 14px;
    color: white;
    z-index: 9999;
    background-color: rgba(40, 48, 60, 1);
    border-radius: 5px;
    opacity: 0.6;
    transition: all 500ms;
    &:hover {
      opacity: 0.8;
    }
  }

  .myPanel {
    position: absolute;
    top: 150px;
    left: 8px;
    
    .c{
      color: gray;
    }
  }
}
</style>
